import React, { useContext, useState } from 'react';
import { Alert, View, TouchableOpacity,ImageBackground } from 'react-native';
import { Button, Divider, Image, ListItem, Text } from 'react-native-elements';
import QRCode from 'react-native-qrcode-svg';
import Clipboard from '@react-native-community/clipboard';
import Toast from 'react-native-simple-toast';

import LocaleContext from '../libs/locale';
import WalletContext from '../libs/wallet';
import logo from '../assets/Rlogo.png';

const Receive = ({ navigation }: any) => {
  const locale: any = useContext(LocaleContext);
  const wallet: any = useContext(WalletContext);
  const [coin, setCoin] = useState('SAT');

  const onCopy = () => {
    Clipboard.setString(wallet.address);
    Toast.show(locale?._('copied'));
  };

  return (
    <View style={{ margin: 40 }}>
      <View style={{ elevation: 2, borderRadius: 8 }}>
        <View>
          <View style={{
            height: 54,
            backgroundColor: '#7460E3FF',
            borderTopLeftRadius: 8,
            borderTopRightRadius: 8,
          }} />
          <View style={{
            height: 270,
            backgroundColor: '#FFFFFF',
            borderBottomLeftRadius: 8,
            borderBottomRightRadius: 8,
          }} />
        </View>
        <View style={{ position: 'absolute', alignItems: 'center', width: '100%' }}>
          <Text style={{
            fontWeight: 'bold',
            fontSize: 18,
            color: '#FFFFFF',
            marginVertical: 6,
          }}>{coin}</Text>
          <View style={{ backgroundColor: '#E7E3FFFF', borderRadius: 46, marginBottom: 20 }}>
            <ImageBackground source={logo} style={{ width: 46, height: 46 }} />
          </View>
          <QRCode value={wallet.address} size={136} />
          <Text style={{
            marginTop: 20,
            fontWeight: 'bold',
            color: '#333333FF',
            width: 160,
            textAlign: 'center'
          }}>{wallet.address}</Text>
        </View>
        <View style={{
          position: 'absolute',
          alignItems: 'flex-end',
          width: '100%',
        }}>
          {/* <TouchableOpacity
            onPress={() => Alert.alert('', '敬请期待')}
            style={{ padding: 16 }}
          >
            <Text
              style={{ fontSize: 14, fontWeight: 'bold', color: 'white' }}
            >{locale?._('Assets.receive.switch')}</Text>
          </TouchableOpacity> */}
        </View>
      </View>
      <View style={{  marginTop: 40, alignItems:'center' }}>
        <Button
          title={locale?._('copy')}
          onPress={onCopy}
          buttonStyle={{ backgroundColor: '#7460E3FF' }}
        />
      </View>
    </View>
  );
};

export default Receive;
